<template>
  <ElRow class="page5">
    <ElCol :span="7" class="leftCol">
      <div class="grid-content">
        <span class='title'><span class="title-gradient">设备数</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="deviceCountContainer">
          <div class="deviceTotal">
            <chanliang ref="deviceTotalRef" :dataNumber="deviceTotal" title="设备数量" />
          </div>
          <deviceCount ref="deviceCountRef"/>
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">设备动态</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="dongtai">
          <shebeiDongtai />
        </div>
      </div>
    </ElCol>
    <ElCol :span="10" class="main">
      <div class="mainChild1">
        <china-map ref="chinaMapRef"/>
      </div>
      <div class="mainChild2">
        <span class='title'><span class="title-gradient">维护信息</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="dongtai">
          <shebeiWeiHu />
        </div>
      </div>
    </ElCol>
    <ElCol :span="7" class="rightCol">
      <div class="grid-content">
        <span class='title'><span class="title-gradient">当日产量</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="chanliangContainer">
          <daylyOutput />
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">当月总产量</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="monthChanliang">
          <monthChanliang ref="monthChanliangRef"/>
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">当月合格率</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="monthChanliang">
          <monthHegelv ref="monthHegelvRef"/>
        </div>
      </div>
    </ElCol>
  </ElRow>
</template>

<script>
import { ElRow, ElCol } from 'element-plus'
import chanliang from './components/chanliang.vue'
import deviceCount from './components/deviceCount.vue'
import shebeiDongtai from './components/shebeiDongtai.vue'
import chinaMap from './components/chinaMap.vue'
import shebeiWeiHu from './components/shebeiWeiHu.vue'
import monthChanliang from './components/monthChanliang.vue'
import monthHegelv from './components/monthHegelv.vue'
import daylyOutput from './components/daylyOutput.vue'
import { getAllEquipInfo } from '/@/api/visualizing/master'
import lodash from 'lodash'
import { getMonthEquipOutput } from '/@/api/visualizing/master'
import { formatStringDate } from '/@/utils/formatTime'
import { useVisualizingMasterStore } from '/@/stores/visualizingMaster'
import { onMounted, ref,shallowRef, onBeforeUnmount } from 'vue'

export default {
  components: {
    ElRow,
    ElCol,
    chanliang,
    deviceCount,
    shebeiDongtai,
    chinaMap,
    shebeiWeiHu,
    monthChanliang,
    monthHegelv,
    daylyOutput
  },
  setup() {
    const deviceTotal = ref(0)
    const deviceCountRef = shallowRef(null)
    const chinaMapRef = ref(null)
    const monthChanliangRef = ref(null)
    const monthHegelvRef = ref(null)
    const store = useVisualizingMasterStore()
    const getAllEquipInfoData = async () => {
      const res = await getAllEquipInfo()
      deviceTotal.value = lodash.get(res, 'data.total', 0)
    }
    const getMonthEquipOutputData = async () => {
      const { code, data } = await getMonthEquipOutput()
      if (code !== 0) return
      const dataList = lodash.get(data, 'list', [])
      if (dataList.length > 0) {
        const totalCount = [];
        const qualifiedData = [];
        const unqualifiedCount = [];
        const qualifiedRatio = [];
        const unqualifiedRatio = [];
        const productionDate = [];
        dataList.map(item => {
          productionDate.push(formatStringDate(lodash.get(item, 'productionDate', '')))
          totalCount.push(lodash.get(item, 'totalCount', 0))
          qualifiedData.push(lodash.get(item, 'qualifiedCount', 0));
          unqualifiedCount.push(lodash.get(item, 'unqualifiedCount', 0));
          qualifiedRatio.push((lodash.get(item, 'qualifiedRatio', 0)*100).toFixed(2));
          unqualifiedRatio.push((lodash.get(item, 'unqualifiedRatio', 0)*100).toFixed(2));
        })
        store.updateMonthOutput({
          MonthOutputProductionDate: productionDate,
          MonthOutputTotal: totalCount,
          MonthOutputQualified: qualifiedData,
          MonthOutputUnqualified: unqualifiedCount,
          MonthOutputQualifiedRate: qualifiedRatio,
          MonthOutputUnqualifiedRate: unqualifiedRatio
        })
      }
    }
    onMounted(() => {
      getAllEquipInfoData()
      getMonthEquipOutputData()
      setInterval(() => {
        getAllEquipInfoData()
        getMonthEquipOutputData()
      }, 3000)
      const handleResize = lodash.debounce(() => {
        deviceCountRef.value && deviceCountRef.value.resize()
        chinaMapRef.value && chinaMapRef.value.resize()
        // monthChanliangRef.value && monthChanliangRef.value.resize()
        monthHegelvRef.value && monthHegelvRef.value.resize()
      });
      window.addEventListener('resize', handleResize)

    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize)
    })
    return {
      deviceTotal,
      deviceCountRef,
      chinaMapRef,
      monthChanliangRef,
      monthHegelvRef,
      getAllEquipInfoData,
      getMonthEquipOutput
    }
  },
}
</script>

<style lang="scss" scoped>
@import url('/@/assets/less/visualizing.less');

.page5 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  overflow: hidden;

  .el-col {
    height: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 100px 250px auto;

    &.main {
      padding: 0 20px;
      display: flex;
    flex-direction: column; /* 垂直方向排列子元素 */
    width: 100%;
    box-sizing: border-box;
    }

    .grid-content {
      border: 1px solid #0D2451;
      position: relative;
      background: rgba(21,20,86, 0.6)
    }
  }
}

.totalContainer {
  text-align: center;
  font-size: 45px;
  color: white;
  position: relative;

  .total {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
  }
}

.shuliangContainer {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 200px 200px;
  /* 两列 */
  grid-template-rows: auto auto;
  /* 两行 */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;

  /* 水平方向居中 */
  .shuliang-item {
    height: 90px;
    text-align: center;
  }

  //   .shuliang-item:nth-child(1) {
  //   grid-column: span 2; /* 让第一个网格项横跨两列 */
  //   justify-self: center; /* 水平居中 */
  // }
}

.deviceCountContainer {
  margin-top: 20px;
  width: 100%;
  height: calc(100% - 20px);

  .deviceTotal {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
  }
}

.dongtai {
  margin-top: 20px;
  height: calc(100% - 20px);
}

.leftCol {
  grid-template-rows: 415px auto !important;
}

.rightCol {
  grid-template-rows: 220px 320px auto !important;
}

.chanliangContainer {
  height: 100%;
  width: 100%;
}

.monthChanliang {
  margin-top: 20px;
  height: 100%;
  width: 100%;
}
.mainChild1 {
    width: 100%; /* 子元素宽度为100% */
    box-sizing: border-box; /* 确保padding和border包含在宽度内 */
    display: block; /* 块级元素 */
    height: 70%;
}
.mainChild2 {
    width: 100%; /* 子元素宽度为100% */
    box-sizing: border-box; /* 确保padding和border包含在宽度内 */
    display: block; /* 块级元素 */
    height: 30%;
    border: 1px solid #0D2451;
    position: relative;
    background: rgba(21,20,86, 0.6)
}
</style>